<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../css/详情页.css">
    <link rel="stylesheet" href="../css/reset.css">
    <!-- <script src="../js/详情页.js"></script> -->
    <script src="../js/jqy.js"></script>
</head>
<body>
    <!-- 右侧导航栏 -->
    <div id="flex-nav">
        <div>
            <a href="#" class="iconfont icon-huafeichongzhi"></a>
            <a href="#">手机APP</a>
        </div>
        <div>
            <a href="#" class="iconfont icon-denglu"></a>
            <a href="#">个人中心</a>
        </div>
        <div>
            <a href="#" class="iconfont icon-weixiu"></a>
            <a href="#">售后服务</a>
        </div>
        <div>
            <a href="#" class="iconfont icon-kefu"></a>
            <a href="#">人工客服</a>
        </div>
        <div>
            <a href="#" class="iconfont icon-gouwuchekong"></a>
            <a href="#">购物车</a>
        </div>
        <div>
            <a href="#" class="iconfont icon-huidaodingbu"></a></a>
            <a href="#">回顶部</a>
        </div>
    </div>
     <!-- 头部导航栏 -->
     <div id="nav">
        <div class="nav-list container ">
            <ul>
                <li><a href="#">小米商城</a></li>
                <li><a href="#">MIUI</a></li>
                <li><a href="#">loT</a></li>
                <li><a href="#">云服务</a></li>
                <li><a href="#">金融</a></li>
                <li><a href="#">有品</a></li>
                <li><a href="#">小爱开放平台</a></li>
                <li><a href="#">企业团购</a></li>
                <li><a href="#">资质证照</a></li>
                <li><a href="#">协议规则</a></li>
                <li><a href="#" id="apps">下载app
                        <div id="app">
                            <img src="../img/app.png" alt="">
                            <p>小米商城app</p>
                        </div>
                    </a>
                </li>
                <li><a href="#">智能生活</a></li>
                <li><a href="#">Select Location</a></li>
            </ul>
            <ol>
                <li id="dl"><a href="注册登录页.html">登录</a></li>
                <li id="zc"><a href="注册登录页.html">注册</a></li>
                <li id="tc"><a href="#">退出</a></li>
                <li><a href="#">消息通知</a></li>
                <li id="cart"><a href="购物车.html"><i class="iconfont icon-gouwuchekong"></i>购物车(0)</a>
                    <div id="cars">购物车中还没有商品</div>
                </li>
            </ol>
        </div>
    </div>

    <!-- //首页商品导航 -->

      <!-- 商品导航栏 -->
      <div id="mainbav" class="container">
        <div class="mainbav-logo">
            <a href="小米首页.html"><img src="../img/mi.jpg" alt=""></a>
        </div>
        <ul class="mainbav-list">
            <li>
                <a href="#"><span>小米手机</span></a>
                <div class="container">
                    <ul>
                        <li>
                            <a href=""><img src="../img/cv.webp" alt=""><p>redmi 11pro</p><b>2599元</b></a>
                        </li>
                        <li>
                            <a href=""><img src="../img/cv.webp" alt=""><p>redmi 11pro</p><b>2599元</b></a>
                        </li>
                        <li>
                            <a href=""><img src="../img/cv.webp" alt=""><p>redmi 11pro</p><b>2599元</b></a>
                        </li>
                        <li>
                            <a href=""><img src="../img/cv.webp" alt=""><p>redmi 11pro</p><b>2599元</b></a>
                        </li>
                        <li>
                            <a href=""><img src="../img/cv.webp" alt=""><p>redmi 11pro</p><b>2599元</b></a>
                        </li>
                        <li>
                            <a href=""><img src="../img/cv.webp" alt=""><p>redmi 11pro</p><b>2599元</b></a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#"><span>Redmi红米</span></a>
                <div class="container">
                    <ul>
                        <li>
                            <a href="#"><img src="../img/mix4.webp" alt=""><p>redmi 11pro</p><b>2599元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/mix4.webp"  alt=""><p>redmi 11pro</p><b>2599元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/mix4.webp"  alt=""><p>redmi 11pro</p><b>2599元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/mix4.webp"  alt=""><p>redmi 11pro</p><b>2599元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/mix4.webp"  alt=""><p>redmi 11pro</p><b>2599元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/mix4.webp"  alt=""><p>redmi 11pro</p><b>2599元</b></a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#"><span>电视</span></a>
                <div class="container">
                    <ul>
                        <li>
                            <a href="#"><img src="../img/dianshi.webp" alt=""><p>小米电视6</p><b>7999元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/dianshi.webp" alt=""><p>小米电视6</p><b>7999元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/dianshi.webp" alt=""><p>小米电视6</p><b>7999元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/dianshi.webp" alt=""><p>小米电视6</p><b>7999元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/dianshi.webp" alt=""><p>小米电视6</p><b>7999元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/dianshi.webp" alt=""><p>小米电视6</p><b>7999元</b></a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#"><span>笔记本</span></a>
                <div class="container">
                    <ul>
                        <li>
                            <a href="#"><img src="../img/pro15.png" alt=""><p>小米笔记本pro</p><b>5999元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/pro15.png" alt=""><p>小米笔记本pro</p><b>5999元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/pro15.png" alt=""><p>小米笔记本pro</p><b>5999元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/pro15.png" alt=""><p>小米笔记本pro</p><b>5999元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/pro15.png" alt=""><p>小米笔记本pro</p><b>5999元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/pro15.png" alt=""><p>小米笔记本pro</p><b>5999元</b></a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#"><span>家电</span></a>
                <div class="container">
                    <ul>
                        <li>
                            <a href="#"><img src="../img/bingxiang.jpg" alt=""><p>米家冰箱</p><b>3999元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/bingxiang.jpg" alt=""><p>米家冰箱</p><b>3999元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/bingxiang.jpg" alt=""><p>米家冰箱</p><b>3999元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/bingxiang.jpg" alt=""><p>米家冰箱</p><b>3999元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/bingxiang.jpg" alt=""><p>米家冰箱</p><b>3999元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/bingxiang.jpg" alt=""><p>米家冰箱</p><b>3999元</b></a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#"><span>路由器</span></a>
                <div class="container">
                    <ul>
                        <li>
                            <a href="#"><img src="../img/luyouqi.jpg" alt=""><p>Xiaomi路由器</p><b>299元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/luyouqi.jpg" alt=""><p>Xiaomi路由器</p><b>299元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/luyouqi.jpg" alt=""><p>Xiaomi路由器redmi 11pro</p><b>299元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/luyouqi.jpg" alt=""><p>Xiaomi路由器</p><b>299元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/luyouqi.jpg" alt=""><p>Xiaomi路由器</p><b>299元</b></a>
                        </li>
                        <li>
                            <a href="#"><img src="../img/luyouqi.jpg" alt=""><p>Xiaomi路由器</p><b>299元</b></a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#"><span>服务</span></a>
               
            </li>
            <li>
                <a href="#"><span>社区</span></a>
                
            </li>
        </ul>
        <div class="mainbav-sousuo">
            <input type="text">
            <div class="mainbav-sousuo-btn"><i class="iconfont icon-sousuo"></i></div>
        </div>
    </div>

    <!-- //手机概述 -->

    <div class="conton" id="app">
        <h2>Xiaomi11</h2>
        <div class="left">
            <a href="#">Xiaomi10至尊纪念版
            
            </a><span>|</span>
            <a href="#">Xiaomi10</a><span>|</span>
            <a href="#">Xiaomi10青春版</a>
        </div>
        <div class="right">
            <a>概述页</a>
            <a>参数页</a>
            <a>F码通道</a>
            <a>咨询客服</a>
            <a>用户评价</a>

        </div>
   </div>
   <div class="mian">
       <div class="mian-l">
         



        </div>
<div class="mian-r">
    <div class="pp">
    <!-- <h2>名字</h2>
    <p>手机详情</p>
    <p>小米自营</p>
    <P>价格</P> -->
   </div>
  <div class="address"> 
    <img src="../img/1638859344(1).png">
  <div class="city">
    
     <a>北京</a>
     <a>北京市</a>
     <a >海淀区</a>
     <a>清河街道</a>
    <a style="color:coral">修改</a> 
        <div class="city2">有现货</div>
  </div>
   </div>
   <p class="title">选择版本</p>
   <div class="guige">
       <p class="small">8G+128G</p>
       <p class="small">8G+256gG</p>
   </div>
   <div class="title2">12G+256G</div>
   <div class="cl">选择颜色</div>
   <div class="cl2">
       <p class="small">蓝色</p>
       <p class="small">黑色</p>
   </div>
   <div class="cl3">
       <p class="small">白色</p>
       <P class="small">素皮</P>
   </div>
   <div class="tt">选择套装</div>
   <div class="bor">
       <p class="small">标准版</p>
       <p class="small">套装版(赠充电器)</p>
   </div>
   <div class="bor2">赠送00元定制果冻包(全款支付专享)</div>
   
   <div class="goodsxinxi">
    <!-- <span>商品名称</span>
    <p>总计:<span>4199</span>元</p> -->
   </div>
 
   <div class="cartbtn"><input type="button" value="加入购物车" id="btn"><button><span class="iconfont icon-xiai"></span> 喜欢</button></div>
</div>
   

</div>
<!-- //底部模块 -->
<!-- 底部footer模块 -->
<div id="footer">
    <div class="footer-list container">
        <ul>
            <li><a href="#"><span class="iconfont icon-weixiu"></span>预约维修服务</a></li>
            <li><a href="#"><span class="iconfont icon-7tianwuliyoutuihuo"></span>7天无理由退货服务</a></li>
            <li><a href="#"><span class="iconfont icon-15tianwuliyoutuihuo"></span>15天免费换货服务</a></li>
            <li><a href="#"><span class="iconfont icon-liwu"></span>满99元包邮</a></li>
            <li><a href="#"><span class="iconfont icon-didian"></span>520余家售后网点</a></li>
        </ul>
    </div>
    <div class="footer-infer container">
        <div class="footer-infer-one ">
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">购物指南</a></dd>
                <dd><a href="">订单操作</a></dd>
            </dl>
            <dl>
                <dt>服务支持</dt>
                <dd><a href="">售后政策</a></dd>
                <dd><a href="">购物指南</a></dd>
                <dd><a href="">订单操作</a></dd>
            </dl>
            <dl>
                <dt>线下门店</dt>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">购物指南</a></dd>
                <dd><a href="">订单操作</a></dd>
            </dl>
            <dl>
                <dt>关于小米</dt>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">购物指南</a></dd>
                <dd><a href="">订单操作</a></dd>
                <dd><a href="">企业社会责任</a></dd>
                <dd><a href="">订单操作</a></dd>
            </dl>
            <dl>
                <dt>关于我们</dt>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">购物指南</a></dd>
                <dd><a href="">订单操作</a></dd>
                <dd><a href="">公益基金会</a></dd>
            </dl>
            <dl>
                <dt>特色服务</dt>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">购物指南</a></dd>
                <dd><a href="">订单操作</a></dd>
            </dl>
        </div>
        <div class="footer-infer-two">
            <p>400-100-5678</p>
            <li>周一至周日 8：00-18：00</li>
            <li>（仅收市话费）</li>
            <a href="#"><span class="iconfont icon-liaotian"></span>人工客服</a>
            <p><span>关注小米：</span><a><span class="iconfont icon-xinlangweibo"></span></a><a><span
                        class="iconfont icon-weixin"></span></a></p>
        </div>
    </div>
</div>

<!-- 底部图标模块 -->
<div id="logo-bottom">
    <div class="logo-bottom-1 container">
        <div class="logo"><img src="../img/logo.png" alt=""></div>
        <div class="list">
            <p class="sites">
                <a rel="nofollow" href="//www.mi.com/index.html" target="_blank">小米商城</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.miui.com/" target="_blank">MIUI</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//home.mi.com/index.html" target="_blank">米家</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.miliao.com/" target="_blank">米聊</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.duokan.com/" target="_blank">多看</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//game.xiaomi.com/" target="_blank">游戏</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//b.mi.com/?client_id=180100031058&masid=17409.0358"
                    target="_blank">政企服务</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//xiaomi.tmall.com/" target="_blank">小米天猫店</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//privacy.mi.com/all/zh_CN/" target="_blank">小米集团隐私政策</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f516fe9e2c01.html"
                    target="_blank">小米公司儿童信息保护规则</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//m.mi.com/support/module?id=63&headless=1" target="_blank">小米商城隐私政策</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.mi.com/about/user-agreement/" target="_blank">小米商城用户协议</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//static.mi.com/feedback/" target="_blank">问题反馈</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="javascript:void(0);" class="J_siteGlobalRegion">Select Location</a>
            </p>
            <p class="sites">
                <a rel="nofollow" href="http://www.mi.com/beihu" target="_blank">北京互联网法院法律服务工作站</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.cca.org.cn/" target="_blank">中国消费者协会</a><span
                    class="sep">|</span>
                <a rel="nofollow" href="http://www.bj315.org/" target="_blank">北京市消费者协会</a>
            </p>
            <p>
                &copy;
                <a href="javascript:;" target="_blank" title="mi.com">mi.com</a> 京ICP证110507号
                <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备10046444号</a>
                <a rel="nofollow" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134"
                    target="_blank">京公网安备11010802020134号</a>
                <a href="//www.mi.com/culture-license/" target="_blank">京网文[2020]0276-042号</a>
                <br>
                <a href="//www.mi.com/medical/record/" target="_blank">（京）网械平台备字（2018）第00005号</a>
                <a href="//www.mi.com/medical/qualification/" target="_blank">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
                <a href="//www.mi.com/business-license/" target="_blank">营业执照</a>
                <a href="//www.mi.com/medical/list/" target="_blank">医疗器械质量公告</a>
                <br>
                <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0c7d4cf3b7cd88de10196e30c92e020.png"
                    target="_blank">增值电信业务许可证</a>&nbsp;网络食品经营备案 京食药网食备202010048 &nbsp;
                <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6859168166651511897f54fa1047fe3.png"
                    target="_blank">食品经营许可证</a>
                <br>
                违法和不良信息举报电话：171-5104-4404&nbsp;<a href='https://www.mi.com/intellectual'
                    target="_blank">知识产权侵权投诉</a>&nbsp;本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
            </p>
        </div>

    </div>
    <div class="info-links container">
        <div class="lianjie">
            <a rel="nofollow"
                href="//privacy.truste.com/privacy-seal/validation?rid=4fc28a8c-6822-4980-9c4b-9fdc69b94eb8&lang=zh-cn"
                target="_blank">
                <img rel="nofollow" src="//i1.mifile.cn/f/i/17/site/truste.png"
                    alt="TRUSTe Privacy Certification" />
            </a>
            <a rel="nofollow" href="//search.szfw.org/cert/l/CX20120926001783002010" target="_blank">
                <img rel="nofollow" src="//s01.mifile.cn/i/v-logo-2.png" alt="诚信网站" />
            </a>
            <a id="_xinchacharenzheng_cert_vip_kexinweb" rel="nofollow"
                href="//xyt.xinchacha.com/pcinfo?sn=523009637759455232&certType=6" target="_blank">
                <img rel="nofollow" src="//xyt.xinchacha.com/img/icon/icon3.png" alt="可信网站" />
            </a>
            <a rel="nofollow" href="//www.mi.com/service/buy/commitment/" target="_blank">
                <img rel="nofollow" src="//i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png"
                    alt="诚信经营 放心消费" />
            </a>
        </div>

    </div>
    <div class="service">
        <li>探索黑科技，小米为发烧而生</li>
    </div>
</div>
<script>
    $(function(){       
    //获取要定位元素距离浏览器顶部的距离
    var navH = $(".conton").offset().top;
    //滚动条事件
    $(window).scroll(function(){
            //获取滚动条的滑动距离
            var scroH = $(this).scrollTop();
            //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
            if(scroH>=navH){
                    $(".conton").css({"position":"fixed","top":0,"left":145});
            }else if(scroH<navH){
                    $(".conton").css({"position":"static","margin":"0 auto"});
            }
            console.log(scroH==navH);
    })
})
     
</script>
<script src="../js/详情页.js"></script>
<script src="../js/jqy.js"></script>
</body>
</html>